import './style/reset.scss';
import './js/rem';
import './style/index.scss';


$(document).ready(function() {
    $.getJSON('./js/data.json', function (data) {
        let effect = "";
        $.each(data, function (i, data) {
            let material = "";
            //收起子类素材的宽度（n*每个子类素材的长度+外层的外边距）
            let marginLeft =  -(data.material.length * 3.63 +1.32);
            //分类是否显示角标锁
            let lock = "";
            let bgColor = 'style="background: '+ data.color +'"';
            $.each(data.material, function (i, item){
                let isLocked = '';
                if(item.isLocked == "1"){
                    isLocked = 'show';
                    lock = 'show';
                }
                material = material +`
                            <!--素材-->
                            <div class="materialItem" materialId="${item.id}" locked ="${item.isLocked}">
                                <!--角标锁-->
                                <div class="lock ${isLocked}">
                                    <span style="border-top-color: ${data.color}"></span>
                                    <i class="icon icon-lock"></i>
                                </div>
                                <img src="${item.thumb}">
                                <p ${bgColor}>${item.name}</p>
                                <!--选中-->
                                <div class="checked none">
                                    <div class="mask" ${bgColor}></div>
                                    <i class="icon icon-checked"></i>
                                </div>
                            </div>
                
                
                `

            });

            effect = effect + `<li subcat="${data.subcat}">
                    <!--分类-->
                    <div class="cover">
                        <!--角标锁-->
                        <div class="lock ${lock}">
                            <span style="border-top-color: ${data.color}"></span>
                            <i class="icon icon-lock"></i>
                        </div>
                        <img src="${data.cover}">
                        <p ${bgColor}>${data.name}</p>
                        <!--选中-->
                        <div class="packup none">
                            <div class="mask" ${bgColor}></div>
                            <i class="icon icon-packup"></i>
                        </div>
                    </div>
                    <div class="material" style="margin-left: ${marginLeft}rem">${material} 
                    </div>
                </li>`;

        });
        $(".more").after(effect);
        initSelect(1011);
        compareImg();
    });
    /*初始化素材*/
    function initSelect(subcat) {
        $(".effect li").each(function(){
            if($(this).attr('subcat') == subcat){
                let selectItem = $(this).find(".materialItem").eq(0)
                let initUrl = selectItem.find("img").attr("src");
                $(".main img").attr({"src":initUrl,"data-new-url":initUrl,"locked":selectItem.attr("locked"),"id":$(this).attr("subcat")+"_"+selectItem.attr("materialid")});
                selectItem.find(".checked").removeClass("none");
                //滚动条位置
                let index = $(this).index();
                let offsetLeft = $(this).outerWidth(true)*(index-1);
                $("footer").scrollLeft(offsetLeft);
                //tip
                $(".tip").css({"left":$(this).offset().left});
                setTimeout(function () {
                    $(".tip").remove();
                },3000);
            }
        });
    }
    /*点击分类*/
    $(".effect").on("click",".cover",function () {
        if($(this).find(".packup").hasClass("none")){
            //返回图标
            $(".packup").addClass("none");
            $(this).find(".packup").removeClass("none");
            //计算滑动距离(更多效果宽度+index-1个分类宽度+留白的左边距)
            let index = $(this).closest("li").index();
            let offsetLeft = $(".more").outerWidth(true) + $(this).closest("li").outerWidth(true)*(index-1)-20;
            //子类素材展开收起
            $(".material").removeClass("marginLeft");
            $(this).next(".material").addClass("marginLeft");
            //选中分类的位置
            $("footer").animate({scrollLeft: offsetLeft}, 200);

        }else{
            $(".packup").addClass("none");
            $(".material").removeClass("marginLeft");
        }
    })
    /*点击素材*/
    $(".effect").on("click",".materialItem",function () {
        //选中图标
        $(".checked").addClass("none");
        $(this).find(".checked").removeClass("none");
        $(".main img").attr({"src":$(this).find("img").attr("src"),
            "data-new-url":$(this).find("img").attr("src"),
            "locked":$(this).attr("locked"),
            "id":$(this).closest("li").attr("subcat")+"_"+$(this).attr("materialId")});
    })
    /*对比*/
    function compareImg() {
        let compare = document.getElementById("compare");
        compare.addEventListener('touchstart',touch, false);
        compare.addEventListener('touchmove',touch, false);
        compare.addEventListener('touchend',touch, false);
        function touch (event){
            var event = event || window.event;
            let oldImg = $(".main img").attr("data-old-url");
            let newImg = $(".main img").attr("data-new-url");
            switch(event.type){
                case "touchstart":
                    $(".main img").attr("src",oldImg);
                    break;
                case "touchend":
                    $(".main img").attr("src",newImg);
                    break;
                case "touchmove":
                    event.preventDefault();
                    $(".main img").attr("src",oldImg);
                    break;
            }

        }
    }
    //保存
    $(".top-save").click(function () {
        let result = {};
        result.resultImg = $(".main img").attr("src");
        result.id = $(".main img").attr("id");
        result.locked = $(".main img").attr("locked");
        console.log(result);
    });

    //手机阻止长按默认菜单
    window.addEventListener('contextmenu', function(e){
        e.preventDefault();
    });

});
